<template>
	<div class="channel">
		<Item :isActive="isActive" @active="$emit('active')">
			<div class="inner">
				<span class="name">
					{{data.name}}
				</span>
				<span class="count">
					{{data.channel_count}}
				</span>
			</div>
		</Item>
	</div>
</template>

<script>
	import Item from "./Item.vue" //导入组件
	export default {
		components: {
			Item //注册组件
		},
		props: {
			isActive: {
				type: Boolean,
				default: false //默认是false
			},
			methods: {
				handleClick() {
					// 通过这个函数来通知父组件,也就是子组件抛出的数据
					// $emit("注册的函数名称",携带的值)
					this.$emit("active")
				}
			},
			data:{
				type:Object,
				default:()=>({})
			}
		}
	}
</script>

<style scoped>
	.channel {
		width: 100%;
		height: 40px;
		line-height: 40px;
	}

	.inner {
		padding: 0 20px;
	}

	.name {
		color: #212121;
		font-weight: 500;
		font-size: 14px;
	}

	.count {
		font-size: 12px;
		color: #999;
		margin-left: 8px;
	}

	.name,
	.count {
		float: left;
	}
</style>
